<script setup>
import { reactive, toRefs } from "vue";
import { geStudyCourseListAPi } from "../../http/http";
// 我的课
const FnStudyCourseList = async () => {
  let res = await geStudyCourseListAPi();
  console.log(res);
};

FnStudyCourseList();

const data = reactive({
  datas: [
    {
      day: "日",
      time: "28",
    },
    {
      day: "一",
      time: "29",
    },
    {
      day: "二",
      time: "今",
    },
    {
      day: "三",
      time: "31",
    },
    {
      day: "四",
      time: "01",
    },
    {
      day: "五",
      time: "02",
    },
    {
      day: "六",
      time: "03",
    },
  ],
  myday: "三",
  status: true,
});
let token = JSON.parse(localStorage.getItem("token"));
if (token) {
  data.status = false;
} else {
  data.status = true;
}
// 点击选择颜色
const active = (e) => {
  console.log(e);
  data.myday = e;
};
const { datas, myday, status } = toRefs(data);
</script>
<template>
  <div class="mylesson" v-show="status == false">
    <div class="Time">2022年8月</div>
    <div class="mydata">
      <ul>
        <li v-for="(item, index) in datas" :key="index">
          <div class="daytime">{{ item.day }}</div>
          <span
            @click="active(item.day)"
            :class="myday == item.day ? 'active' : ''"
            >{{ item.time }}</span
          >
        </li>
      </ul>
    </div>
    <!-- 今天课程 -->
    <div class="today">
      <div class="course">
        今日课程(
        <span class="num">0 <span class="jie">节</span></span>
        )
      </div>
      <van-icon name="calendar-o" />
    </div>
    <div class="const_img">
      <li>
        <div class="img">
          <img
            src="	https://wap.lexuemiao.com/img/history-full@3x.fd48535a.png"
            alt=""
          />
        </div>
        <span>学习记录</span>
      </li>
      <li>
        <div class="img">
          <img
            src="	https://wap.lexuemiao.com/img/ziliao@3x.6d7c3da4.png"
            alt=""
          />
        </div>
        <span>学习资料</span>
      </li>
    </div>
    <!-- 学习的课程 -->
    <div class="const_title" v-show="status">
      <van-cell title="正在学的的课程" is-link value="查看更多" />
    </div>
    <!-- 状态 -->
    <van-empty description="暂无课程，快去选课吧" />
    <!-- 按钮 -->
    <van-button type="primary" round color="#f15a24" block>去选课</van-button>
  </div>
  <div class="empty" v-show="status == true">
    <p>请登录查看相关内容</p>
    <van-button color="#f15a24" type="primary" @click="$router.push('/login')"
      >登录 / 注册</van-button
    >
  </div>
</template>

<style lang="scss" scoped>
.empty {
  text-align: center;
  p {
    font-size: 30px;
    margin-top: 200px;
    margin-bottom: 50px;
  }
  .van-button {
    width: 280px;
  }
}

.mylesson {
  width: 750px;
  padding: 20px;
  .Time {
    font-weight: 700;
    font-size: 60px;
  }
  .mydata {
    ul {
      display: flex;
      justify-content: space-around;
      li {
        width: 50px;
        text-align: center;
        font-size: 25px;
      }
    }
  }
  .today {
    width: 700px;
    height: 110px;
    margin: auto;
    background: #f5f6f8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin-top: 20px;
    border-radius: 10px;
    .course {
      font-size: 30px;
      .num {
        color: #f15a24;
      }
      .jie {
        color: black;
        font-size: 20px;
      }
    }
  }
  .const_img {
    display: flex;
    justify-content: space-around;
    margin: 50px 0;
    li {
      display: flex;
      flex-direction: column;
      text-align: center;
      span {
        font-size: 25px;
      }
      img {
        width: 100px;
        height: 100px;
      }
    }
  }
  .const_title {
    margin-top: 30px;
  }
}
::v-deep .van-cell__title {
  span {
    font-size: 40px;
  }
}
.active {
  display: block;
  width: 50px;
  line-height: 50px;
  background: #f15a24;
  color: white;
  border-radius: 50px;
}
</style>